<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bpmn</title>
  <script src="./antvx6.js"></script>
  <script src="./layout.min.js"></script>
</head>

<body>
  <div id="container"></div>
  <script>
    window.onload = function () {
      let nodeList = [
        {
          "id": "2",
          "label": "请假申请"
        },
        {
          "id": "6",
          "label": "领导审批"
        },
        {
          "id": "7",
          "label": "人事审批"
        },
        {
          "id": "13",
          "label": "总经理审批"
        },
      ];
      let linkList = [
        {
          "source": "2",
          "target": "6"
        },
        {
          "source": "2",
          "target": "7"
        },
        {
          "source": "6",
          "target": "13"
        },
        {
          "source": "7",
          "target": "13"
        },
      ]

      const Graph = X6.Graph;

      Graph.registerNode(
        'activity',
        {
          inherit: 'rect',
          markup: [
            {
              tagName: 'rect',
              selector: 'body',
            },
            {
              tagName: 'text',
              selector: 'label_1',
            },
            {
              tagName: 'text',
              selector: 'label_2',
            },
            {
              tagName: 'text',
              selector: 'label_3',
            },
            {
              tagName: 'text',
              selector: 'label_4',
            },
          ],
          attrs: {
            body: {
              rx: 6,
              ry: 6,
              stroke: '#5F95FF',
              fill: '#EFF4FF',
              strokeWidth: 1,
            },
            label_1: {
              fontSize: 12,
              fill: '#262626',
              refX: 10,// 与左侧的边框的距离
              refY: 12,
              textAnchor: 'start',// 左对齐
              textWrap: {
                text: `前道项目(201A)`,
                width: -20,// 宽度减少20px
                height: 14,
                ellipsis: true,// 文本溢出显示省略号
                breakWord: true,// 是否截断单词
              }
            },
            label_2: {
              fontSize: 12,
              fill: '#262626',
              refX: 10,// 与左侧的边框的距离
              refY: 26,
              textAnchor: 'start',/// 左对齐
              textWrap: {
                text: `责任人：张三`,
                width: -20,// 宽度减少20px
                height: 14,
                ellipsis: true,// 文本溢出显示省略号
                breakWord: true,// 是否截断单词
              }
            },
            label_3: {
              fontSize: 12,
              fill: '#262626',
              refX: 10,// 与左侧的边框的距离
              refY: 40,
              textAnchor: 'start',/// 左对齐
              textWrap: {
                text: `计划完成日期：2022-10-19`,
                width: -20,// 宽度减少20px
                height: 14,
                ellipsis: true,// 文本溢出显示省略号
                breakWord: true,// 是否截断单词
              }
            },
            label_4: {
              fontSize: 12,
              fill: '#262626',
              refX: 10,// 与左侧的边框的距离
              refY: 54,
              textAnchor: 'start',/// 左对齐
              textWrap: {
                text: `实际完成日期：2022-10-19`,
                width: -20,// 宽度减少20px
                height: 14,
                ellipsis: true,// 文本溢出显示省略号
                breakWord: true,// 是否截断单词
              }
            },
          },
        },
        true,
      )


      Graph.registerEdge(
        'bpmn-edge',
        {
          inherit: 'edge',
          attrs: {
            line: {
              stroke: '#A2B1C3',
              strokeWidth: 2,
            },
          },
        },
        true,
      )

      const graph = new Graph({
        container: document.getElementById('container'),
        // autoResize: true,
        scroller: true,// zoomToFit需要用到
        width: window.innerWidth,
        height: window.innerHeight,
        interacting: function (cellView) {
          return false;// 禁止节点拖拽 https://blog.csdn.net/qq_43274430/article/details/125763687
        },
        connecting: {
          router: 'orth',// 连线的方式 ['normal','orth','oneSide','manhattan','metro','er']
        },
      })
      console.log(260, graph);

      let renderData = {};
      let nodes = [];
      let edges = [];
      nodeList.forEach(item => {
        nodes.push(Object.assign({}, item, {
          shape: 'activity',
          width: 180,
          height: 65
        }))
      })
      linkList.forEach(item => {
        edges.push(Object.assign({}, item, {
          shape: 'bpmn-edge',
        }))
      })
      renderData.nodes = nodes;
      renderData.edges = edges;

      const gridLayout = new layout.DagreLayout({
        type: 'grid',
        rankdir: 'LR',
        nodesep: 60,// 节点间距
        ranksep: 50,// 层间距
        // marginx: 100,
        // marginy: 100,
      })
      console.log(218, gridLayout.layout(renderData));
      graph.fromJSON(gridLayout.layout(renderData));

      // graph.zoomToFit({ padding: 30, maxScale: 1 });
      // graph.on('node:click', (e) => {});
    }
  </script>
</body>

</html>